<template>
  <div>
    <div class="Abox">
      <el-form label-position="left" :model="form" :rules="rules" ref="form">
        <div class="Rbox">
          <div class="ziti">登录</div>
          <el-form-item prop="username">
          <el-input
            style="outline: none;border: none;"
           class="SK" 
           v-model="form.username" 
           placeholder="请输入您的手机号、邮箱、或者昵称！"></el-input>
         </el-form-item>
         <el-form-item prop="userpwds">
           <el-input
           class="SK" 
           style="outline: none;border: none;"
           placeholder="请输入密码" 
           v-model="form.userpwds" 
           show-password></el-input>
           </el-form-item>
          <el-checkbox v-model="checked" style="margin-top: 10px;">记住登录状态</el-checkbox>
          <el-link style="float:right; margin-top: 10px;" type="warning">忘记密码？</el-link>
          <el-row style="margin-top: 60px;">
             <el-button type="warning" style="float:left; font-size: 22px; width: 200px;" @click="login()">登录</el-button>
             <el-button type="danger" style="float: right; font-size: 22px; width: 200px;">注册</el-button>
           </el-row> 
        </div>
      </el-form>
    </div>
    <div class="Bbox">
      <p class="D1">粤ICP备12041107号 粤公网安备 44030402000128号</p>
      <img class="D2" src="../../../public/footer-logo.png" alt="">
      <div class="D3">
         <a class="dd" href="#">Wap版</a>
         <a class="dd" href="#">服务协议</a>
         <a class="dd" href="#">法律声明</a>
         <a class="dd" href="#">联系我们</a>
         <a class="dd" href="#">授权条款</a>
         <a class="dd" href="#">喵特工</a>
         <a class="dd" href="#">安全联盟</a>
         <a class="dd" href="#">彩蛋</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form:{
          username:"",
          userpwds:"",
        },
        rules:{
          // username:[
          //   {required:true,message:'请输入用户昵称',trigger:"blur"},
          //   {pattern:/^[A-Za-z0-9u4e00-u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/||/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))d{8}$/,
          //    message:"邮箱或者手机号",
          //    trigger:"blur",
          // },
          // ],
          // userpwds:[
          // { required: true, message: "请填写用户名", trigger: "blur" },
          // {
          //   pattern: /^\w{6,15}$/,
          //   message: "6~15位字符，可以包含：数字、字母、下划线",
          //   trigger: "blur",
          // },
          // ],
        },
      }
    },

    methods:{
      checked(){
        console.log('点击了');
      },
      login(){
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Abox{
    background: url(../../../public/bg-login.png) no-repeat left center;
    height: 600px;
    width: 1100px;
    margin: 0 auto;
    background-color: #f5f5f5;
    .Rbox{
      width: 415px;
      float: right;
      margin-top: 30px;
      padding: 30px;
      background-color: #fff;
      .ziti{
        font-size: 35px;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
      }
      .SK{
        margin-top: 10px;
        font-size: 22px;
        border: 1px solid #666;
        border-radius: 5px;
      }
      
     
    }
  }
  .Bbox{
    background-color: #333333;
    height: 400px;
    width: 100%;
    position: relative;
    .D1{
      color: #fff;
    position: absolute;
    bottom: 5px;
    left: 47%;
    }
    .D2{
      position: absolute;
      right: 30%;
      top: 30%;
    }
    .D3{
      color: #fff;
      width: 330px;
      height: 300px;
      position: absolute;
      right: 42%;
      top: 35%;
      .dd{
        width: 100px;
        margin: 5px;
        display: inline-block;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        &:hover{
          color: #666;
        }
      }
    }
  }
</style>